import {Component, OnInit} from '@angular/core';
import {Product, ProductService} from '../shared/product.service';
import {FormControl} from '@angular/forms';
// import 'rxjs/add/operator/debounceTime';
import {debounceTime} from 'rxjs/operators';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  public products: Observable<Product[]>;
  public imgUrl = 'http://placehold.it/320x150';
  constructor(private productService: ProductService) {
  }

  // 组件实例化后，该方法会被调用一次
  ngOnInit() {
    this.products = this.productService.getProducts();
    this.productService.searchEvent.subscribe(
      params => {
        this.products = this.productService.search(params);
      }
    );
  }

}

